<include file="public/layout" />
<body style="background-color: #FFF; overflow: auto;">
<style>
    .hide{
        display:none;
    }
</style>
<div class="page" style="height: 100%">

    <form class="layui-form" action="">
        <input type="hidden" name="id" value="{$info.id}" />
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px">父级菜单：</label>
            <div class="layui-input-inline" style="width:300px">
                <select name="pid">
                    <foreach name="$parent_arr" item="parent">
                        <option <if condition="$info['pid'] eq $parent['id']">selected</if> value="{$parent['id']}">{$parent['name']}</option>
                    </foreach>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px">菜单名称：</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="name" lay-verify="required" value="{$info['name']}" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div id="setmenu_type" class="layui-form-item">
            <label class="layui-form-label" style="width:130px">菜单内容</label>
            <div class="layui-input-inline" style="width:500px">
                <input type="radio" value="click" title="发送消息" <if condition="$info['menu_type'] eq 'click'">checked</if> name="menu_type" checked lay-filter="menu_type">
                <input type="radio" value="view" title="跳转网页" <if condition="$info['menu_type'] eq 'view'">checked</if> name="menu_type" lay-filter="menu_type">
                <input type="radio" value="miniprogram" title="跳转小程序" <if condition="$info['menu_type'] eq 'miniprogram'">checked</if> name="menu_type" lay-filter="menu_type">
            </div>
        </div>
        <div id="menu_click" class="hide" <if condition="!$info or $info['menu_type'] eq 'click'">style="display:block;"</if>>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:130px">消息类型{$info['menu_type']}</label>
                <div class="layui-input-inline" style="width:500px">
                    <input type="radio" value="news" title="图文" name="message_type" <if condition="$info['message_type'] eq 'news'">checked</if> lay-filter="message_type">
                    <input type="radio" value="text" title="文字" name="message_type" <if condition="$info['message_type'] eq 'text'">checked</if> lay-filter="message_type">
                    <input type="radio" value="image" title="图片" name="message_type" <if condition="$info['message_type'] eq 'image'">checked</if> lay-filter="message_type">
                    <input type="radio" value="voice" title="音频" name="message_type" <if condition="$info['message_type'] eq 'voice'">checked</if> lay-filter="message_type">
                    <input type="radio" value="video" title="视频" name="message_type" <if condition="$info['message_type'] eq 'video'">checked</if> lay-filter="message_type">
                </div>
            </div>
            <div class="layui-form-item" id="message_news" <if condition="$info['menu_type'] eq 'click' and $info['message_type'] eq 'news'">style="display:block;"</if>>
                <label class="layui-form-label" style="width:130px">选择图文：</label>
                <input type="hidden" name="news_content" id="news_content" class="layui-input" value="{$info.news_content}">
                <button style="float:left;" type="button" class="layui-btn layui-btn-primary" onclick="selectnews()">选择图文</button>
                <div id="news_contentPreview" style="float:left;padding-top:10px;margin-left:95px;clear:both;">

                </div>
            </div>
            <div class="layui-form-item hide" id="message_text" <if condition="$info['menu_type'] eq 'click' and $info['message_type'] eq 'text'">style="display:block;"</if>>
                <label class="layui-form-label" style="width:130px">文字内容：</label>
                <div class="layui-input-inline" style="width:500px">
                    <textarea id="text_content" name="text_content" style="width:474px;height:140px" class="layui-textarea">{$info.text_content}</textarea>

                </div>
            </div>
            <div class="layui-form-item hide" id="message_image" <if condition="$info['menu_type'] eq 'click' and $info['message_type'] eq 'image'">style="display:block;"</if>>
                <label class="layui-form-label" style="width:130px">选择图片：</label>
                <input type="hidden" name="image_content" id="image_content" class="layui-input" value="{$info.image_content}">
                <button style="float:left;" type="button" class="layui-btn layui-btn-primary" upload-input="image_content" upload-preview="image_contentPreview" onclick="uploader(this,false,{'browser':'active','wximage':''})">上传图片</button>
                <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">不大于2M</div>
                <div id="image_contentPreview" style="float:left;padding-top:10px;margin-left:160px;clear: both;">
                    <div class="layui-imgbox" style="width:100px;"><div class="layui-imgbox-img"><img src="{$info.image_content}"/></div></div>
                </div>
            </div>
            <div class="layui-form-item hide" id="message_voice" <if condition="$info['menu_type'] eq 'click' and $info['message_type'] eq 'voice'">style="display:block;"</if>>
                <label class="layui-form-label" style="width:130px">选择音频：</label>
                <input type="hidden" name="voice_content" value="{$info.voice_content}" id="voice_content"/>
                <button style="float:left;" type="button" class="layui-btn layui-btn-primary" upload-input="voice_content" upload-preview="voice_contentPreview" onclick="uploader(this,false,{'browser':'active','wxvoice':''})">上传音频</button>
                <div id="voice_contentPreview" class="layui-form-mid" style="margin-left:20px;"></div>
                <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">请上传mp3格式的音频，不大于2M</div>
                <script>
                    function delaudio(){
                        $('#voice_contentPreview').html('');
                        $('#voice_content').val('');
                    }
                </script>
            </div>
            <div id="message_video" class="hide" <if condition="$info['menu_type'] eq 'click' and $info['message_type'] eq 'video'">style="display:block;"</if>>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:130px">选择视频：</label>
                    <input type="hidden" name="video_content" value="{$info.video_content}" id="video_content"/>
                    <button style="float:left;" type="button" class="layui-btn layui-btn-primary" upload-input="video_content" upload-preview="video_contentPreview" onclick="uploader(this,false,{'browser':'active','wxvideo':''})">上传视频</button>
                    <div id="video_contentPreview" class="layui-form-mid" style="margin-left:20px;"></div>
                    <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">请上传mp4格式的视频，不大于10M</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:130px">视频标题</label>
                    <div class="layui-input-inline" style="width:300px">
                        <input type="text" value="{$info.video_title}" name="video_title" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"style="width:130px">视频描述</label>
                    <div class="layui-input-inline" style="width:300px">
                        <input type="text" value="{$info.video_introduction}" name="video_introduction" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>
            </div>
        </div>
        <div id="menu_view" class="hide" <if condition="$info['menu_type'] eq 'view'">style="display:block;"</if>>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:130px">页面地址</label>
                <div class="layui-input-inline" style="width:300px">
                    <input type="text" value="{$info.menu_url}" name="menu_url" class="layui-input">
                </div>
                <button style="float:left;" type="button" class="layui-btn layui-btn-primary" onclick="chooseUrl(0)">选择链接地址</button>
                <div class="layui-form-mid layui-word-aux" style="float:left;padding-top:10px;margin-left:95px;clear: both;">请填写http://或https://开头的完整链接地址</div>
            </div>
        </div>
        <div id="menu_miniprogram" class="hide"  <if condition="$info['menu_type'] eq 'miniprogram'">style="display:block;"</if>>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:130px">小程序AppID</label>
                <div class="layui-input-inline">
                    <input type="text" value="{$info.menu_appid}" name="menu_appid" class="layui-input">
                </div>
                <!-- <button style="float:left;" type="button" class="layui-btn layui-btn-primary" onclick="selectminiprogram()">选择小程序</button> -->
                <div class="layui-form-mid"> AppID请登录小程序查找</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:130px">小程序路径</label>
                <div class="layui-input-inline">
                    <input type="text" value="{$info.menu_pagepath}" name="menu_pagepath" class="layui-input">
                </div>
                <button style="float:left;" type="button" class="layui-btn layui-btn-primary" onclick="chooseUrl(1)">选择路径</button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">确认</button>
            </div>
        </div>
    </form>

</div>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/,
                '密码必须6到12位，且不能出现空格'
            ]
        });
        // 提交事件
        form.on('submit(demo1)', function(data){
            var index = layer.load();
            layer.close(index);

            var field = data.field; // 获取表单字段值
            $.ajax({
                type: "POST",
                url: "{:url('edit_menu')}",
                data: field,
                success: function(res){
                    console.log(res);
                    if(res.status){
                        layer.msg('提交成功');
                    }else{
                        layer.msg(res.msg);
                    }
                    setTimeout(function(){
                        parent.layer.closeAll();
                        parent.tableIns.reload()
                    },1000)
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 日期
        laydate.render({
            elem: '#date'
        });
    });
    layui.form.on('radio(message_type)', function(data){
        var elem = data.elem; // 获得 radio 原始 DOM 对象
        var checked = elem.checked; // 获得 radio 选中状态
        var value = elem.value; // 获得 radio 值
        if(value=='news'){
            $('#message_news').show();
            $('#message_text').hide();
            $('#message_image').hide();
            $('#message_voice').hide();
            $('#message_video').hide();
        }else if(value=='text'){
            $('#message_text').show();
            $('#message_news').hide();
            $('#message_image').hide();
            $('#message_voice').hide();
            $('#message_video').hide();
        }else if(value=='image'){
            $('#message_image').show();
            $('#message_text').hide();
            $('#message_news').hide();
            $('#message_voice').hide();
            $('#message_video').hide();
        }else if(value=='voice'){
            $('#message_voice').show();
            $('#message_image').hide();
            $('#message_text').hide();
            $('#message_news').hide();
            $('#message_video').hide();
        }else if(value=='video'){
            $('#message_video').show();
            $('#message_voice').hide();
            $('#message_image').hide();
            $('#message_text').hide();
            $('#message_news').hide();
        }
    });
    layui.form.on('radio(menu_type)', function(data){
        var elem = data.elem; // 获得 radio 原始 DOM 对象
        var checked = elem.checked; // 获得 radio 选中状态
        var value = elem.value; // 获得 radio 值
        // <input type="radio" value="click" title="发送消息" name="menu_type" checked lay-filter="menu_type">
        //     <input type="radio" value="view" title="跳转网页" name="menu_type" lay-filter="menu_type">
        //         <input type="radio" value="miniprogram" title="跳转小程序" name="menu_type" lay-filter="menu_type">
        if(value=='click'){
            $('#menu_click').show();
            $('#menu_view').hide();
            $('#menu_miniprogram').hide();
        }else if(value=='view'){
            $('#menu_view').show();
            $('#menu_click').hide();
            $('#menu_miniprogram').hide();
        }else if(value=='miniprogram'){
            $('#menu_miniprogram').show();
            $('#menu_view').hide();
            $('#menu_click').hide();
        }
    });
    //选择链接
    var urltype = 0
    function chooseUrl(type){
        urltype = type
        layer.open({type:2,shadeClose:true,area:['1100px', '650px'],'title':'选择链接',content:"{:url('DesignPage/chooseurl')}"})
    }
    function chooseLink(urlname,hrefurl){
        if(urltype==0){
            hrefurl = '{:getCurUrl()}/h5/{$aid}.html#'+hrefurl;
            $("input[name='menu_url']").val(hrefurl);
        }else{
            $("input[name='menu_pagepath']").val(hrefurl.substr(1));
        }
    }
    layui.upload.render({
        elem: '.uploadjstxt', //绑定元素
        url: "{:url('Upload/uploadjstxt')}", //上传接口
        accept:'file',
        data:{type:'wx'},
        done: function(res){
            //上传完毕回调
            console.log(res)
            $('input[name="config['+res.field+']"]').val(res.file_path);
            $('#'+res.field+'_text').text('已上传')
            dialog(res.msg,res.status)
        },
        error: function(){
            //请求异常回调
        }
    });
</script>
</body>
</html>